<template>
  <section>
    <idss-widget style="padding: 10px;" hi>
      <template slot="title-left">
        <span>分类列表</span>
      </template>
    </idss-widget>
    <idss-widget style="padding:0 10px 15px;">
      <template slot="title-left">
        <!-- 新建 -->
        <el-button icon="el-icon-plus" size="mini" @click="openClassify('ADD', null)">新增</el-button>
      </template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
        <el-table-column prop="typeName" label="名称" align="center"></el-table-column>
        <el-table-column prop="creationTime" label="创建时间" width="180" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openClassify('EDIT', scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="delClassify(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </idss-widget>

    <el-dialog :title="commonDialog.title" :visible.sync="commonDialog.dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="form.typeName"></el-input>
        </el-form-item>
        <el-form-item class="myitem" style="text-align:center">
          <el-button size="small" @click="commonDialog.dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="saveClassify">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script>
const API = {
  LIST: {
    url: "/api/services/app/ProductType/GetAll",
    method: "Get"
  },
  // 新增
  ADD: {
    request: {
      url: "/api/services/app/ProductType/Create",
      method: "Post"
    },
    title: "新增分类"
  },
  // 编辑
  EDIT: {
    request: {
      url: "/api/services/app/ProductType/Update",
      method: "Put"
    },
    title: "编辑分类"
  }
};
export default {
  data() {
    return {
      tableData: [
        {
          typeName: "特产咨询",
          creationTime: "",
          id: 1
        }
      ],
      form: {
        typeName: ""
      },
      commonDialog: {
        title: "新增分类",
        dialogVisible: false
      },
      currentType: "ADD",
      currentData: {}
    };
  },
  methods: {
    // 查询列表
    getList() {
      this.$axios({
        ...API.LIST
      }).then(res => {
        this.tableData = res.data.result.items;
      });
    },
    // 新增分类
    openClassify(type, param) {
      this.currentType = type;
      this.currentData = param;
      this.commonDialog.title = API[type].title;
      this.commonDialog.dialogVisible = true;
      type === "EDIT" && (this.form = param);
    },
    saveClassify() {
      let param = {};
      this.currentType === "ADD" &&
        (param = { typeName: this.form.typeName, orderNo: this.form.orderNo });
      this.currentType === "EDIT" &&
        (param = {
          typeName: this.form.typeName,
          orderNo: this.form.orderNo,
          id: this.currentData.id
        });
      this.$axios({
        ...API[this.currentType].request,
        data: param
      })
        .then(() => {
          this.$message({
            type: "success",
            message: this.currentType === "ADD" ? "新增成功" : "编辑成功"
          });
          this.commonDialog.dialogVisible = false;
          this.getList();
        })
        .catch(error => {
          this.$message({
            type: "error",
            message: error.response.data.error.message
          });
        });
    },
    delClassify(param) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            url: "/api/services/app/ProductType/Delete?Id=" + param.id,
            method: "DELETE"
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            })
            .catch(error => {
              this.$message({
                type: "error",
                message: error.response.data.error.message
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style >
.myitem .el-form-item__content {
  margin-left: 0 !important;
}
</style>
